<template>
  <!-- <div class="content-box">
  <common-header :title="title"></common-header>-->
  <div class="page-content">
    <van-field
      v-model="accname"
      type="text"
      clearable
      label="开户人姓名"
      placeholder="请输入开户人姓名"
      required
      error-message-align="right"
      :error-message="userNameMessage"
    />
    <van-field
      v-model="idCard"
      v-if="check_bankchan"
      type="text"
      clearable
      label="身份证"
      placeholder="请输入身份证"
      required
      error-message-align="right"
      :error-message="idCardMessage"
    />
    <van-field
      v-model="bankName"
      clearable
      type="text"
      label="所属银行"
      placeholder="请输入所属银行"
      required
      error-message-align="right"
      :error-message="bankNameMessage"
    />
    <van-field
      v-model="bankCardNum"
      clearable
      type="number"
      label="银行卡号"
      placeholder="请输入银行卡号"
      required
      error-message-align="right"
      :error-message="bankCardNumMessage"
    />
    <van-field
      v-model="bankPosition"
      type="text"
      clearable
      label="开户网点"
      placeholder="请输入开户网点"
      required
      error-message-align="right"
      :error-message="bankPositionMessage"
    />

    <div class="btnPay" @click="finish()">完善信息</div>
    <div class="care">您绑定银行卡的开户名必须与您认证的实名一致，否则将无法成功提现。</div>
    <commonFooter></commonFooter>
  </div>
  <!-- </div> -->
</template>
<script>
import { commonFooter } from "common";
import { patternBank, idcardReg } from "@/utils/regRex";
import { openconfApi } from "@/api";
import { bindBankApi } from "@/api/user";
import { createNamespacedHelpers } from "vuex";
let { mapActions, mapState } = createNamespacedHelpers("user");
export default {
  name: "addBankcard",
  components: {
    commonFooter
  },
  created() {
    this.accname = this.$store.state.user.realname;
    openconfApi({ key: "check_bankchan" }).then(res => {
      if (res.code == 200 && res.data == "new") {
        this.check_bankchan = true;
        this.$route.meta.title = "实名认证";
        this.$dispatch("changeTitle", "实名认证");
        // console.log(this.$route);
      }
    });
  },
  computed: {
    // ...mapState({ accname: "realname" })
  },
  methods: {
    ...mapActions(["GetBaseInfo"]),
    finish() {
      let _this = this;
      this.userNameMessage = "";
      this.bankNameMessage = "";
      this.bankCardNumMessage = "";
      this.bankPositionMessage = "";
      this.idCardMessage = "";

      if (!this.bankName) {
        this.bankNameMessage = "开户银行不能为空";
      }
      if (this.check_bankchan && !idcardReg.test(this.idCard)) {
        this.idCardMessage = "请输入正确的身份证";
      }
      if (!this.bankPosition) {
        this.bankPositionMessage = "开户网点不能为空";
      }
      if (!this.bankCardNum) {
        this.bankCardNumMessage = "银行卡号不能为空";
      } else if (!patternBank.test(this.bankCardNum)) {
        this.bankCardNumMessage = "请输入正确的银行卡号";
      } else if (
        this.bankName &&
        this.bankPosition &&
        (!this.check_bankchan || idcardReg.test(this.idCard))
      ) {
        let postData = {
          accname: this.accname,
          bankname: this.bankName,
          bankid: this.bankCardNum,
          banksite: this.bankPosition
        };
        if (this.check_bankchan) postData.card_id = this.idCard;
        bindBankApi(postData).then(res => {
          this.$toast({
            message: res.msg,
            duration: 500,
            onClose: function() {
              if (res.code == 200) {
                _this.GetBaseInfo().then(data => {
                  if (_this.$route.query.redirect) {
                    _this.$router.replace({
                      path: _this.$route.query.redirect
                    });
                  } else {
                    _this.$router.replace({
                      path: "/user/myBankcard"
                    });
                  }
                });
              }
            }
          });
        });
      }
    }
  },
  data() {
    return {
      title: "新增银行卡",
      check_bankchan: false,
      idCard: "",
      idCardMessage: "",
      accname: "",
      userName: "",
      userNameMessage: "",
      bankName: "",
      bankNameMessage: "",
      bankCardNum: "",
      bankCardNumMessage: "",
      bankPosition: "",
      bankPositionMessage: ""
    };
  }
};
</script>
<style lang="less" scoped>
@import "~styles/variable.less";
</style>
